<template>
  <view class="page">
    <!-- 头部区域 -->
    

    <!-- 内容区域 -->
    <view class="content">
      <view v-if="pendingServices.length > 0">
        <view class="service-item" v-for="(item, index) in pendingServices" :key="index">
          <text class="service-name">{{ item.serviceName }}</text>
          <text class="service-date">{{ formatDate(item.startDate) }} - {{ formatDate(item.endDate) }}</text>
          <text class="service-time">{{ item.startTime }} - {{ item.endTime }}</text>
        </view>
      </view>
      <view v-else class="no-service-tip">
        <text>暂无待完成服务项</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { getCaregiverAssignmentList } from '@/api/nurse/caregiverassignment'

const pendingServices = ref([])

// 获取所有未完成的服务项
const fetchPendingServices = async () => {
  try {
    const archiveId = uni.getStorageSync('archiveId')
    const res = await getCaregiverAssignmentList({ caregivergId: archiveId })
    if (res.code === 200) {
      const currentDate = new Date().toISOString().split('T')[0]
      pendingServices.value = res.data
        .filter(item => {
          const endDate = item.serviceEndDate
          return currentDate <= endDate
        })
        .map(item => ({
          serviceName: item.serviceName || '未命名服务',
          startDate: item.serviceStartDate,
          endDate: item.serviceEndDate,
          startTime: item.serviceStartTime,
          endTime: item.serviceEndTime
        }))
    }
  } catch (err) {
    console.error('获取服务项失败:', err)
  }
}

// 格式化日期显示
const formatDate = (dateString) => {
  const date = new Date(dateString)
  return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`
}

// 返回按钮点击事件
const handleBack = () => {
  uni.navigateBack()
}

onMounted(() => {
  fetchPendingServices()
})
</script>

<style scoped lang="scss">
.page {
  padding: 20rpx;
}

.header {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20rpx;
  border-bottom: 1rpx solid #eee;
}

.title {
  font-size: 32rpx;
  font-weight: bold;
}

.back-button {
  position: absolute;
  left: 20rpx;
}

.service-item {
  padding: 20rpx;
  margin-bottom: 20rpx;
  background-color: #fff;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.service-name {
  font-size: 28rpx;
  color: #333;
  display: block;
}

.service-date,
.service-time {
  font-size: 24rpx;
  color: #666;
  display: block;
  margin-top: 8rpx;
}

.no-service-tip {
  text-align: center;
  padding: 20rpx;
  font-size: 28rpx;
  color: #999;
}
</style> 